// admin_frontend/src/styles/theme.scss

// 核心色板 (现代科技感)
:root {
  --bg-color-dark: #0d1117; // 主要背景色
  --bg-color-light: #161b22; // 卡片和次级背景
  --border-color: #30363d;   // 边框颜色
  
  --text-primary: #c9d1d9;    // 主要文字颜色
  --text-secondary: #8b949e; // 次要文字和描述
  --text-muted: #6e7681;      // 禁用或提示性文字
  
  --accent-blue: #58a6ff;
  --accent-green: #3fb950;
  --accent-purple: #bc8cff;
  --accent-red: #f85149;
  --accent-yellow: #e3b341;
  --accent-cyan: #79c0ff;
  --accent-pink: #f778ba;

  // 渐变色
  --primary-gradient: linear-gradient(135deg, #58a6ff, #3d52fc);
  --success-gradient: linear-gradient(135deg, #3fb950, #2ea043);
  --danger-gradient: linear-gradient(135deg, #f85149, #d73a49);
}

// 混合宏 - 用于可复用的样式块
@mixin tech-card {
  background-color: var(--bg-color-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  }
}

@mixin tech-button {
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;

  &.primary {
    background: var(--primary-gradient);
    color: white;
    &:hover {
      opacity: 0.9;
      box-shadow: 0 4px 15px rgba(88, 166, 255, 0.3);
    }
  }

  &.outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
    &:hover {
      background-color: rgba(88, 166, 255, 0.1);
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }
  }
  
  &.success {
    background: var(--success-gradient);
    color: white;
     &:hover {
      opacity: 0.9;
    }
  }
}

@mixin gradient-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

// 通用页面样式
.tech-page {
  background-color: var(--bg-color-dark);
  color: var(--text-primary);
  padding: 20px;
  min-height: 100vh;
} 